<template>
  <div class="wishPage">
    <div class="searchBox bgfff">
      <el-form
        :inline="true"
        :model="form"
        label-width="90px"
        ref="formRef"
        class="demo-form-inline"
        size="small"
      >
        <el-row>
          <el-col :span="9">
            <el-form-item label="达人姓名：" prop="user_name">
              <el-input
                v-model="form.user_name"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="9">
            <el-form-item label="手机号：" prop="phone">
              <el-input v-model="form.phone" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="6">
            <el-form-item label="所在小区：" prop="year">
              <el-select v-model="form.sex_limit" placeholder="请选择">
                <el-option label="不限" value="3"> </el-option>
                <el-option label="男" value="1"> </el-option>
                <el-option label="女" value="2"> </el-option>
              </el-select>
            </el-form-item>
          </el-col> -->
        </el-row>
        <el-row style="margin-top: 20px">
          <el-col :span="9">
            <el-form-item label="专业技能：" prop="talent_names">
              <el-input
                v-model="form.talent_names"
                placeholder="请输入"
              ></el-input>
              <!-- <el-select v-model="form.type" placeholder="请选择">
                <el-option label="全部" value="0"> </el-option>
                <el-option label="非物质文化传承人" value="1"> </el-option>
                <el-option label="唱歌达人" value="2"> </el-option>
                <el-option label="跑步达人" value="3"> </el-option>
                <el-option label="手工艺人" value="4"> </el-option>
                <el-option label="教师" value="5"> </el-option>
                <el-option label="心理咨询师" value="6"> </el-option>
                <el-option label="游泳教练" value="7"> </el-option>
                <el-option label="篮球教练" value="8"> </el-option>
                <el-option label="绘画达人" value="9"> </el-option>
              </el-select> -->
            </el-form-item>
          </el-col>
          <el-col :span="9">
            <el-form-item label="达人状态：" prop="status">
              <el-select v-model="form.status" placeholder="请选择">
                <el-option label="全部" value="0"> </el-option>
                <el-option label="正常" value="1"> </el-option>
                <el-option label="冻结中" value="2"> </el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="6" style="display: flex; justify-content: flex-end">
            <el-form-item style="margin-right: 0">
              <el-button type="primary" size="small" @click="onSubmit"
                >查询</el-button
              >
              <el-button @click="resetForm('formRef')">重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="tablesCard bgfff">
      <div class="tablesCardTop">
        <div></div>
        <div>
          <el-button type="primary" size="small" @click="addTalentShow = true"
            >添加达人</el-button
          >
          <el-button
            type="primary"
            size="small"
            @click="skillsManageShow = true"
            >管理技能</el-button
          >
        </div>
      </div>
      <el-table :data="tableData" border size="small" style="width: 100%">
        <!-- height="580" -->
        <el-table-column prop="user_name" label="达人姓名" align="center">
        </el-table-column>
        <el-table-column prop="user.nickName" label="用户昵称" align="center">
        </el-table-column>
        <el-table-column prop="phone" label="手机号" align="center" />
        <el-table-column prop="village" label="所在小区" align="center">
        </el-table-column>
        <!-- <el-table-column prop="type_text" label="房屋" align="center" /> -->
        <el-table-column prop="" label="专业技能" align="center">
          <template slot-scope="scope">
            <span v-for="(item, index) in scope.row.talent"
              >{{ item.type_name }}
              <em v-show="index != scope.row.talent.length - 1">、</em>
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="user" label="微项目积分数" align="center">
          <template slot-scope="scope">
            {{ scope.row.user?.min_project_points }}
          </template>
        </el-table-column>
        <el-table-column prop="active_count" label="活动次数" align="center" />
        <el-table-column prop="status_text" label="达人状态" align="center" />
        <el-table-column
          fixed="right"
          prop=""
          label="操作"
          align="center"
          width="170"
        >
          <template slot-scope="scope">
            <div class="">
              <el-link type="primary" @click="onBtns(1, scope.row)"
                >查看</el-link
              >
              <el-divider direction="vertical"></el-divider>
              <el-link type="primary" @click="onBtns(2, scope.row)"
                >赋分</el-link
              >
              <el-divider direction="vertical"></el-divider>
              <el-link type="primary" @click="onBtns(3, scope.row)"
                >达人管理</el-link
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="pageBlock">
        <el-pagination
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          :current-page.sync="form.page"
          :page-size="form.limit"
          @size-change="
            (e) => {
              form.limit = e;
              getList();
            }
          "
          @current-change="
            (e) => {
              form.page = e;
              getList();
            }
          "
        >
        </el-pagination>
      </div>
    </div>
    <addTalent
      v-if="addTalentShow"
      @handleClose="
        (val) => {
          addTalentShow = false;
          if (val) getList();
        }
      "
      :dialogVisible="addTalentShow"
    ></addTalent>
    <skillsManage
      v-if="skillsManageShow"
      @handleClose="
        (val) => {
          skillsManageShow = false;
          if (val) getList();
        }
      "
      :dialogVisible="skillsManageShow"
    >
    </skillsManage>
    <talentDeatil
      v-if="talentDeatilShow"
      @handleClose="
        (val) => {
          talentDeatilShow = false;
          if (val) getList();
        }
      "
      :dialogVisible="talentDeatilShow"
      :id="id"
    ></talentDeatil>
    <talentManage
      v-if="talentManageShow"
      @handleClose="
        (val) => {
          talentManageShow = false;
          if (val) getList();
        }
      "
      :dialogVisible="talentManageShow"
      :id="id"
    ></talentManage>
  </div>
</template>

<script>
import { talentList, talentDetail, assignPoints } from "@/api/talent.js";
import addTalent from "./common/addTalent.vue";
import skillsManage from "./common/skillsManage.vue";
import talentDeatil from "./common/talentDeatil.vue";
import talentManage from "./common/talentManage.vue";
export default {
  name: "",
  props: [""],

  data() {
    return {
      form: {
        user_name: "",
        phone: "",
        talent_names: "",
        status: "",
        page: 1,
        limit: 10,
      },
      tableData: [{}],
      total: 0,
      addTalentShow: false,
      skillsManageShow: false,
      talentDeatilShow: false,
      talentManageShow: false,
      id: "",
    };
  },

  components: { addTalent, skillsManage, talentDeatil, talentManage },

  computed: {},

  beforeMount() {},

  mounted() {
    this.getList();
    // this.getList2();
  },

  methods: {
    getList() {
      talentList(this.form).then((res) => {
        if (res.code == 200) {
          this.tableData = res.data.list;
          this.total = res.data.page.count;
        }
      });
    },
    onSubmit() {
      this.getList();
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.getList();
    },
    // getList2() {
    //   talentReviewList({
    //     user_name: "",
    //     phone: "",
    //     type: 2,
    //     status: 2,
    //   }).then((res) => {
    //     if (res.code == 200) {
    //       console.log(res.data, ">>>dataList-----");
    //     }
    //   });
    // },

    onBtns(val, info) {
      console.log(val, "KKKKKK");
      if (val == 1) {
        this.id = info.id;
        this.talentDeatilShow = true;
      } else if (val == 2) {
        this.id = info.id;
        // 赋分
        this.$confirm(
          "是否确认赋分？确认后将下发5000积分至该用户积分账户",
          "",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }
        )
          .then(() => {
            assignPoints({
              id: this.id,
            }).then((res) => {
              if (res.code == 200) {
                this.$message({
                  type: "success",
                  message: res.msg,
                });
              }
              this.getList();
            });
          })
          .catch(() => {
            // this.$message({
            //   type: "info",
            //   message: "已取消下架",
            // });
          });
      } else {
        //达人管理
        this.id = info.id;
        this.talentManageShow = true;
      }
    },
  },

  watch: {},
};
</script>
<style lang="scss" scoped>
.wishPage {
  .searchBox {
    margin-bottom: 14px;
    padding: 0 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    height: 120px;

    /deep/.el-form-item {
      margin-bottom: 0;
      .el-input__inner {
        width: 300px;
      }
    }
    .time {
      .el-input__inner {
        width: 360px;
      }
    }
  }
  .tablesCard {
  }
}
</style>
